.accountBook {
  position: relative;
  height: 100%;
  background-color: #eee;
  cursor: default;

  :global {
    .homePage {
      .toolbar {
        display: flex;
        justify-content: space-between;
        height: 5rem;
        background-color: #fff;

        .bookChoose {
          margin-left: 1rem;

          img {
          }

          .nameWrap {
            padding: 5px 2px;
            border-radius: 5px;

            &:hover {
              background-color: #eee;
            }
          }
        }

        .rightBtns {
          & > span {
            margin-left: 1rem;
            padding: 5px 10px;
          }

          .searchBtn {
            width: 5rem;

            &:hover {
              background-color: #eee;
            }
          }
        }
      }

      .content {
        display: flex;
        height: calc(100% - 8rem);

        .left {
          width: 50rem;
          height: 100%;

          .importantData {
            display: flex;
            justify-content: space-between;
            height: 5rem;
            margin: 1rem;

            .importantItem {
              flex: 1;
              // width: 16rem;
              background-color: #fff;
            }

            .importantItem:nth-child(n + 2) {
              margin-left: 2rem;
            }
          }

          .incomeExpanse {
            height: 24rem;
            margin: 1rem;
            background-color: #fff;
            border-radius: 5px;
          }

          .proportion {
            height: 10rem;
            margin: 1rem;
            background-color: #fff;
            border-radius: 5px;
          }
        }

        .right {
          display: flex;
          flex: 1;
          height: 100%;
          // width: 5rem;
          flex-direction: column;

          .calendar {
            height: 20rem;
            margin: 1rem;
            background-color: #fff;
            border-radius: 5px;
          }

          .recentData {
            height: 30rem;
            margin: 1rem;
            background-color: #fff;
            border-radius: 5px;
          }
        }
      }
    }

    .leftWhole {
      transform: translate(calc(-100% - 48px));
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #00000055;
    }
    .createBook {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
    }
  }
}
